<template>
  <view class="wanl-goods">
    <!-- 导航条 -->
    <view class="cu-custom" :style="{ height: wanlsys.height + 'px' }">
      <view class="cu-bar fixed" :style="{ height: wanlsys.height + 'px', paddingTop: wanlsys.top + 'px' }">
        <view class="action" @tap="back"><text class="wlIcon-fanhui1"></text></view>
        <view class="search-form round">
          <text class="wlIcon-sousuo1 text-bold"></text>
          <swiper class="search-swiper placeholder" vertical autoplay circular interval="3000">
            <swiper-item @tap="productSearch('')">搜索商品、类目</swiper-item>
          </swiper>
        </view>
        <view class="action">
          <!-- #ifndef MP -->
          <text class="wlIcon-fenxiangcopy" @tap="showModal('share')"></text>
          <text class="wlIcon-liebiaomoshi" @tap="showModal('menu')"></text>
          <text class="wlIcon-31gouwuche" @tap="toCart"></text>
          <!-- #endif -->
        </view>

        <view class="bar-bg solid-bottom" :style="{ top: wanlsys.height + 'px', opacity: headerOpacity }">
          <scroll-view scroll-x class="nav">
            <view class="flex justify-around text-center">
              <view
                class="cu-item"
                :class="selectAnchor == index ? 'text-orange cur' : ''"
                v-for="(anchor, index) in anchorlist"
                :key="anchor.name"
                @tap="toAnchor(index)"
              >
                {{ anchor.name }}
              </view>
            </view>
          </scroll-view>
        </view>
        <!-- 直播 -->

        <!-- #ifndef H5 -->
        <view class="wan-live" v-if="goodsData.isLive" @tap="onLive(goodsData.isLive.id)">
          <view class="tag shadow-blur" :style="{ top: wanlsys.height + 47 + 'px' }">
            <view class="text-center">
              <view class="live">
                <view class="wanLive-icon"> </view>
              </view>
              <text class="text-white margin-lr-xs"> 在直播 </text>
            </view>
          </view>
        </view>
        <!-- #endif -->
      </view>
    </view>

    <!-- 商品主图轮播 -->
    <view class="swiper-box" id="swiper">
      <view class="random-user">
        <swiper autoplay vertical disable-touch circular>
          <swiper-item v-for="item in randomUserList" :key="item.id">
            <view class="random-user-item">
              <image class="random-user-avatar" :src="item.avatar"></image>
              <view class="random-user-text"> {{ item.nickname }}用户购买了此商品 </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <swiper circular="true" :autoplay="swiperAutoplay" @change="swiperChange">
        <swiper-item v-for="(swiper, index) in goodsData.images" :key="index">
          <block v-if="index == 0 && goodsData.vediofile">
            <video
              id="swiperAudio"
              objectFit="contain"
              controls
              style="width: 100%; height: 100%"
              show-center-play-btn
              show-mute-btn="true"
              auto-pause-if-navigate
              :enable-progress-gesture="false"
              :custom-cache="false"
              @ended="videoPlay = false"
              :src="$wanlshop.oss(goodsData.vediofile, 400, 0)"
              v-show="videoPlay"
            ></video>
            <image v-show="!videoPlay" :src="$wanlshop.oss(swiper, 400, 0)" mode="aspectFill" />
            <view class="video-play" v-show="!videoPlay" @tap="playVideo">
              <image class="video-play-icon" src="/static/images/play-icon.png"></image>
            </view>
          </block>
          <image v-else :src="$wanlshop.oss(swiper, 400, 0)" mode="aspectFill" />
        </swiper-item>
      </swiper>
      <view class="indicator">{{ currentSwiper + 1 }}/{{ goodsData.images.length }}</view>
    </view>
    <!-- <official-account>1</official-account> -->
    <!--  秒杀  -->
    <view class="seckill" v-if="goodsData.is_seckill">
      <view class="seckill-text"></view>
      <view class="seckill-count-down">
        <view style="margin-bottom: 8rpx">距秒杀结束</view>
        <CountDown
          bg-color="#DD4343"
          text-color="#FFFFFF"
          time-color="#DD4343"
          :timestamp="goodsData.seckill_end_time"
        ></CountDown>
      </view>
    </view>
    <!-- 产品 -->
    <view class="bg-white">
      <!-- 普通 -->
      <view class="price margin-bottom-sm padding-lr-bj padding-top-bj align-start">
        <view>
          <!-- 	<view class="text-price wanl-orange text-xxl margin-right-xs">
						{{ goodsData.interval_price || '0.00' }}
					</view> -->
          <view class="wanl-orange text-xxl margin-right-xs">
            <text v-if="goodsData.is_seckill" class="text-lg margin-right-xs"> 秒杀价 </text>
            <f-money :money="goodsData.interval_price * 1" :size="53" color="#fe6600" :unitSize="40" />

            <block v-if="goodsData.score * 1">
              +
              <f-money
                :money="goodsData.score * 1"
                :unit="integralName"
                :size="40"
                color="#fe6600"
                :unitSize="30"
                unitPosition="right"
                :showZeroDecimal="false"
              />
            </block>
          </view>

          <view class="text-sm wanl-gray text-dec">
            市场价
            <text class="text-price margin-left-xs">{{ goodsData.market_price || 0.0 }}</text>
          </view>
          <view class="text-lg wanl-orange">
            赠送
            <text class="text-price margin-left-xs">{{ sendScore || 0.0 }}</text>
            <text>{{ integralName }}</text>
          </view>
        </view>

        <text
          class="cu-tag radius lm line-red"
          @click="$wanlshop.auth('/pages/user/vip/index')"
          style="font-size: 30rpx !important; margin-top: 12rpx"
          >购买会员享优惠</text
        >

        <view class="follow wanl-black" v-if="goodsData.follow" @tap="follow">
          <text class="wlIcon-yiguanzhu1 text-red"></text>
          <text class="text-xs">取消收藏</text>
        </view>
        <view class="follow wanl-black" v-else @tap="follow">
          <text class="wlIcon-gerenguanzhu"></text>
          <text class="text-xs">收藏</text>
        </view>
      </view>
      <view class="title padding-lr-bj padding-bottom-bj">
        <view class="name wanl-black text-lg text-cut-2">
          <view v-if="goodsData.shop.isself == 1" class="cu-tag radius margin-right-xs sm bg-red">自营</view>
          {{ goodsData.title || '加载中...' }}
        </view>
        <view class="share" @tap="showModal('share')">
          <view class="button wanl-gray-light margin-bottom">
            <text class="wlIcon-fenxiangcopy margin-right-xs"></text>
            <text class="text-sm">分享</text>
          </view>
        </view>
      </view>

      <view class="block text-min padding-lr padding-bottom-bj">
        <view class="wanl-gray">
          <text class="wlIcon-weizhi margin-right-xs"></text>
          {{ goodsData.shop.city ? goodsData.shop.city.split('/')[1] : '中国' }}
        </view>
        <view class="wanl-gray">
          快递费：
          <text class="text-price">{{ goodsData.freight.price }}</text>
        </view>
        <view class="wanl-gray">
          月销
          <text class="margin-left-xs">{{ goodsData.virtual_sales + goodsData.sales }}</text>
        </view>
      </view>
    </view>
    <!-- 营销 -->
    <view class="promotion text-sm">
      <view class="item" @tap="showModal('coupon')" v-if="goodsData.coupon.length != 0">
        <view class="label wanl-gray">领券</view>
        <view class="conten flex">
          <view class="wanl-ticket text-sm" v-for="(item, index) in goodsData.coupon" :key="index" v-if="index < 2">
            <block v-if="item.type == 'reduction' || (item.type == 'vip' && item.usertype == 'reduction')">
              <view class="ticket-price"> ￥{{ Number(item.price) }} </view>
              <view class="ticket-title">
                <text>满{{ Number(item.limit) }}减{{ Number(item.price) }}</text>
              </view>
            </block>
            <block v-if="item.type == 'discount' || (item.type == 'vip' && item.usertype == 'discount')">
              <view class="ticket-price"> {{ Number(item.discount) }}折 </view>
              <view class="ticket-title">
                <text>满{{ Number(item.limit) }}打{{ Number(item.discount) }}折</text>
              </view>
            </block>
            <block v-if="item.type == 'shipping'">
              <view class="ticket-price"> 包邮 </view>
              <view class="ticket-title">
                <text>满{{ Number(item.limit) }}元包邮</text>
              </view>
            </block>
          </view>
        </view>
        <view class="bnt-quan wanl-gray"> 更多<text class="wlIcon-fanhui2 margin-left-xs"></text> </view>
      </view>
    </view>
    <!-- 选择商品 -->
    <view class="choice margin-bottom-bj padding-bj text-sm bg-white">
      <view class="commodity margin-bottom-bj" @tap="showModal('option')">
        <view class="opt">
          <view class="title wanl-gray">选择</view>
          <view class="option">
            <view class="selected">
              <view v-if="canCount">
                选择
                <text class="margin-lr-xs" v-for="(item, index) in goodsData.spu" :key="item.id">{{ item.name }}</text>
              </view>
              <view v-else>
                已选
                <text>{{ selectArr.join(' / ') }}</text>
              </view>
            </view>
            <!--						<view class="option-list">-->
            <!--							<view v-for="(item, index) in goodsData.spu" :key="item.id">-->
            <!--								<text class="cu-tag" v-if="index == 0" v-for="tag in item.item"-->
            <!--									:key="tag.name">{{ tag.name }}</text>-->
            <!--								<text class="cu-tag" v-if="index == 0">更多规格可选</text>-->
            <!--							</view>-->
            <!--						</view>-->
          </view>
        </view>
        <view class="text-sm wanl-gray"><text class="wlIcon-fanhui2"></text></view>
      </view>
      <view class="commodity" @tap="showModal('service')">
        <view class="opt">
          <view class="title wanl-gray text-sm">服务</view>
          <view class="option">
            <view class="selected">
              <block v-for="(item, index) in goodsData.shop.service_ids" :key="item.id" v-if="index <= 2">
                <text class="margin-lr-xs" v-if="index != 0">·</text>
                {{ item.name }}
              </block>
            </view>
          </view>
        </view>
        <view class="text-min wanl-gray"><text class="wlIcon-fanhui2"></text></view>
      </view>
    </view>
    <!-- 产品参数 -->
    <view class="choice margin-bottom-bj padding-bj text-sm bg-white">
      <view class="commodity" @tap="showModal('attribute')">
        <view class="opt">
          <view class="title wanl-gray text-sm">参数</view>
          <view class="option">
            <view class="selected"><text>品牌、规格等...</text></view>
          </view>
        </view>
        <view class="text-min wanl-gray"><text class="wlIcon-fanhui2"></text></view>
      </view>
    </view>
    <!-- 评论 -->
    <view class="comment margin-bottom-bj padding-bj bg-white" id="evaluate">
      <view class="head" @tap="onTag('')">
        <view>宝贝评论({{ goodsData.comment }})</view>
        <view class="wanl-gray wanl-orange">
          {{ goodsData.comment > 0 ? parseInt((goodsData.praise / goodsData.comment) * 100) : 0 }}%好评率
          <text class="wlIcon-fanhui2 margin-left-xs"></text>
        </view>
      </view>
      <!-- 标签 -->
      <view class="label margin-bottom padding-bottom solid-bottom">
        <view @tap="onTag('good')" class="cu-tag round">好评 ({{ goodsData.praise }})</view>
        <view @tap="onTag('pertinent')" class="cu-tag round">中评 ({{ goodsData.moderate }})</view>
        <view @tap="onTag('poor')" class="cu-tag round">差评 ({{ goodsData.negative }})</view>
        <view @tap="onTag('figure')" class="cu-tag round">有图 ({{ goodsData.comment_list.figure }})</view>
        <view @tap="onTag(index)" v-for="(item, index) in goodsData.comment_list.tag" :key="index" class="cu-tag round"
          >{{ index }} ({{ item }})</view
        >
      </view>
      <!-- 获取一个评论 -->
      <view class="user" v-for="(item, index) in goodsData.comment_list.data" :key="item.id" @tap="onTag('')">
        <view class="userinfo">
          <view class="avatar">
            <view
              class="cu-avatar sm round margin-right-xs"
              :style="{ backgroundImage: 'url(' + $wanlshop.oss(item.user.avatar, 26, 26, 2, 'avatar') + ')' }"
            >
            </view>
            <view class="text-sm wanl-gray">{{ item.user.nickname }}</view>
          </view>
          <wanl-rate :current="item.score" :disabled="true"></wanl-rate>
        </view>

        <view class="details text-min">
          <view class="margin-bottom-sm">{{ item.content }}</view>
          <view class="wanl-gray">规格：{{ item.suk }}</view>
        </view>
        <view
          class="grid flex-sub grid-square"
          :class="[item.images.length > 3 ? 'col-3' : 'col-' + item.images.length]"
          v-if="item.images.length != 0"
        >
          <view
            class="bg-img"
            v-for="(image, index) in item.images"
            :key="index"
            v-if="index <= 3"
            :style="{ backgroundImage: 'url(' + $wanlshop.oss(image, 88, 88) + ')' }"
          ></view>
        </view>
      </view>
      <!-- 查看更多 -->
      <view class="more" @tap="onTag('')"
        ><text class="wanl-gray text-sm">查看全部</text><text class="wlIcon-fanhui4 margin-left-xs"></text
      ></view>
    </view>
    <!-- 店铺 -->
    <view class="shop padding-bj solid-bottom bg-white">
      <view class="shopinfo margin-bottom">
        <view
          class="cu-avatar lg radius-bock"
          :style="{ backgroundImage: 'url(' + $wanlshop.oss(goodsData.shop.avatar, 52, 52, 2, 'avatar') + ')' }"
        >
        </view>
        <view class="shopname">
          <view class="text-df text-cut" style="width: 300rpx">{{ goodsData.shop.shopname }}</view>
          <view class="wanl-gray text-min"
            >{{ $wanlshop.toFormat(goodsData.shop.find_user.fans, 'thousand') }} 人关注店铺</view
          >
        </view>
        <view class="bnt">
          <button class="cu-btn round line-orange margin-right-sm" @tap="onShop(goodsData.shop_id, 'goods')">
            全部宝贝
          </button>
          <button class="cu-btn round bg-gradual-orange" @tap="onShop(goodsData.shop_id)">进店逛逛</button>
        </view>
      </view>

      <view class="quality wanl-gray text-min">
        <view>
          宝贝描述
          <text class="">{{ goodsData.shop.score_describe }}</text>
          <view v-if="goodsData.shop.score_describe < 4.7" class="cu-tag round di">低</view>
          <view v-else class="cu-tag round gao">高</view>
        </view>
        <view>
          卖家服务
          <text class="wanl-orange">{{ goodsData.shop.score_service }}</text>
          <view v-if="goodsData.shop.score_service < 4.7" class="cu-tag round di">低</view>
          <view v-else class="cu-tag round gao">高</view>
        </view>
        <view>
          物流服务
          <text class="wanl-orange">{{ goodsData.shop.score_logistics }}</text>
          <view v-if="goodsData.shop.score_logistics < 4.7" class="cu-tag round di">低</view>
          <view v-else class="cu-tag round gao">高</view>
        </view>
      </view>
    </view>
    <!-- 店铺推荐 -->
    <view class="shop-recom padding-bj bg-white">
      <view class="head">
        <view class="">店铺推荐</view>
        <view class="text-sm wanl-orange" @tap="onShop(goodsData.shop_id)">
          查看全部
          <text class="wlIcon-fanhui2 margin-left-xs"></text>
        </view>
      </view>
      <view class="recommend margin-bottom-xs">
        <view class="item" v-for="(item, index) in goodsData.shop_recommend" :key="item.id" @tap="onGoods(item.id)">
          <image :src="$wanlshop.oss(item.image, 125, 120)" mode="aspectFill"></image>
          <view class="text-sm margin-tb-xs text-cut">{{ item.title }}</view>
          <view class="text-price wanl-orange text-df">{{ item.price }}</view>
        </view>
      </view>
    </view>
    <!-- 分隔符 -->
    <wanl-divider width="60%">产品详情</wanl-divider>
    <!-- 产品详情 -->
    <view class="wanl-goods-content bg-white" id="details">
      <rich-text :nodes="goodsData.content"></rich-text>
    </view>
    <!-- 分隔符 -->
    <wanl-divider width="60%">推荐商品</wanl-divider>
    <!-- 猜你喜欢 -->
    <view id="recommend">
      <wanl-product :dataList="likeData" />
    </view>
    <uni-load-more :status="status" :content-text="contentText" />
    <view class="safeAreaBottom"></view>
    <view class="WANL-MODAL text-sm" @touchmove.stop.prevent="moveHandle">
      <!-- 顶部 -->
      <view class="cu-modal top-modal" :class="modalName == 'menu' ? 'show' : ''" @tap="hideModal">
        <view class="wanl-modal-menu cu-dialog" @tap.stop="">
          <wanl-direct @change="hideModal" />
        </view>
      </view>
      <!-- 促销 -->
      <view class="cu-modal bottom-modal" :class="modalName == 'promotion' ? 'show' : ''" @tap="hideModal">
        <view class="cu-dialog" @tap.stop="">
          <view class="wanl-modal">
            <view class="head padding-bj">
              <view class="content">
                <view class="text-lg">促销</view>
              </view>
              <view class="close wlIcon-31guanbi" @tap="hideModal"></view>
            </view>
          </view>
        </view>
      </view>
      <!-- 优惠券 -->
      <view class="cu-modal bottom-modal" :class="modalName == 'coupon' ? 'show' : ''" @tap="hideModal">
        <view class="cu-dialog bg-bgcolor" @tap.stop="">
          <view class="wanl-modal">
            <view class="head padding-bj">
              <view class="content">
                <view class="text-lg">优惠券</view>
              </view>
              <view class="close wlIcon-31guanbi" @tap="hideModal"></view>
            </view>
            <scroll-view class="wanl-coupon scroll-y" scroll-y="true">
              <view
                v-for="(coupon, index) in goodsData.coupon"
                :key="index"
                :class="coupon.type"
                class="item margin-bottom-bj radius-bock"
              >
                <image :src="$wanlshop.appstc('/coupon/bg_coupon_3x.png')" class="coupon-bg"></image>
                <image
                  :src="$wanlshop.appstc('/coupon/img_couponcentre_received_3x.png')"
                  class="coupon-sign"
                  v-if="coupon.state"
                ></image>
                <view class="item-left">
                  <block v-if="coupon.type == 'reduction' || (coupon.type == 'vip' && coupon.usertype == 'reduction')">
                    <view class="colour">
                      <text class="text-price"></text>
                      <text class="prices">{{ Number(coupon.price) }}</text>
                    </view>
                    <view class="cu-tag wanl-gray-dark radius text-sm bg-white">
                      满{{ Number(coupon.limit) }}减{{ Number(coupon.price) }}
                    </view>
                  </block>
                  <block v-if="coupon.type == 'discount' || (coupon.type == 'vip' && coupon.usertype == 'discount')">
                    <view class="colour">
                      <text class="prices">{{ Number(coupon.discount) }}</text>
                      <text class="discount">折</text>
                    </view>
                    <view class="cu-tag wanl-gray-dark radius text-sm bg-white">
                      满{{ Number(coupon.limit) }}打{{ Number(coupon.discount) }}折
                    </view>
                  </block>
                  <block v-if="coupon.type == 'shipping'">
                    <view class="colour">
                      <text class="prices">包邮</text>
                    </view>
                    <view class="cu-tag wanl-gray-dark radius text-sm bg-white">
                      满{{ Number(coupon.limit) }}元包邮
                    </view>
                  </block>
                </view>
                <view class="item-right padding-bj">
                  <view class="title">
                    <view class="cu-tag sm radius margin-right-xs tagstyle">
                      {{ coupon.type_text }}
                    </view>
                    <text class="text-cut wanl-gray text-min">{{ coupon.name }}</text>
                  </view>
                  <view class="content text-min">
                    <view class="wanl-gray">
                      <view v-if="coupon.grant != '-1'">
                        <text class="wlIcon-dot"></text>目前仅剩余 {{ coupon.surplus }} 张
                      </view>

                      <view v-if="coupon.drawlimit != 0">
                        <text class="wlIcon-dot"></text>每人仅限领取 {{ coupon.drawlimit }} 张
                      </view>
                      <block v-if="coupon.pretype == 'fixed'">
                        <view> <text class="wlIcon-dot"></text>生效 {{ coupon.startdate }} </view>
                        <view> <text class="wlIcon-dot"></text>结束 {{ coupon.enddate }} </view>
                      </block>
                      <block v-if="coupon.pretype == 'appoint'">
                        <view v-if="coupon.validity == 0"> <text class="wlIcon-dot"></text>未使用前 永久 有效 </view>
                        <view v-else> <text class="wlIcon-dot"></text>领取后 {{ coupon.validity }} 天有效 </view>
                      </block>
                    </view>
                    <view class="cu-btn sm round" @tap="onReceive(index)" v-if="!coupon.state">
                      <text>立即领取</text>
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
            <view class="foot padding-lr-bj"
              ><button class="cu-btn bg-gradual-orange round text-bold complete" @tap="hideModal">完成</button>
            </view>
          </view>
        </view>
      </view>
      <!-- 产品参数 -->
      <view class="cu-modal bottom-modal" :class="modalName == 'attribute' ? 'show' : ''" @tap="hideModal">
        <view class="cu-dialog" @tap.stop="">
          <view class="wanl-modal">
            <view class="head padding-bj">
              <view class="content">
                <view class="text-lg">产品参数</view>
              </view>
            </view>
            <scroll-view class="scroll-y" scroll-y="true">
              <view class="table solid-bottom">
                <view class="name wanl-gray">品牌</view>
                <view class="value">{{ goodsData.brand.name }}</view>
              </view>
              <view class="table solid-bottom" v-for="(item, index) in goodsData.category_attribute" :key="index">
                <view class="name wanl-gray">{{ index }}</view>
                <view class="value">{{ item }}</view>
              </view>
            </scroll-view>
            <view class="foot padding-lr-bj"
              ><button class="cu-btn bg-gradual-orange round text-bold complete" @tap="hideModal">完成</button>
            </view>
          </view>
        </view>
      </view>
      <!-- 分享 -->
      <view class="cu-modal bottom-modal" :class="modalName == 'share' ? 'show' : ''" @tap="hideModal">
        <view class="cu-dialog" @tap.stop="">
          <wanl-share
            :scrollAnimation="scrollAnimation"
            :shareTitle="goodsData.title"
            :shareText="goodsData.description"
            :image="$wanlshop.oss(goodsData.image, 50, 50)"
            :href="
              common.appConfig.domain +
              '/pages/product/goods?id=' +
              goodsData.id +
              '&QRtype=&type=0&invitation=' +
              invitation
            "
            isReport
            @change="wanlShare"
          />
        </view>
      </view>
      <!-- 服务 -->
      <view class="cu-modal bottom-modal" :class="modalName == 'service' ? 'show' : ''" @tap="hideModal">
        <view class="cu-dialog" @tap.stop="">
          <view class="wanl-modal">
            <view class="head padding-bj">
              <view class="content">
                <view class="text-lg">基础服务保障</view>
              </view>
            </view>
            <view class="listbox padding-bj">
              <view v-for="(item, index) in goodsData.shop.service_ids" :key="item.id">
                <view class="name">
                  {{ item.name }}
                  <text class="wlIcon-fuwuxing"></text>
                </view>
                <view class="description wanl-gray text-min">{{ item.description }}</view>
              </view>
            </view>
            <view class="foot padding-lr-bj"
              ><button class="cu-btn bg-gradual-orange round text-bold complete" @tap="hideModal">完成</button>
            </view>
          </view>
        </view>
      </view>
      <!-- 规格 -->
      <view class="cu-modal bottom-modal" :class="modalName == 'option' ? 'show' : ''" @tap="hideModal">
        <view class="cu-dialog" @tap.stop="">
          <view class="option wanl-modal">
            <view class="head text-left padding-bj solid-bottom">
              <view
                class="cu-avatar radius-bock margin-right"
                :style="{
                  backgroundImage: 'url(' + $wanlshop.oss(selectshop.thumbnail || goodsData.image, 100, 100) + ')',
                }"
              >
              </view>

              <view class="">
                <!-- <view class="text-price wanl-orange text-xl">{{ selectshop.price || goodsData.interval_price }}</view> -->

                <view class="wanl-orange text-xl">
                  <f-money
                    :money="selectshop.price * 1 || goodsData.interval_price * 1"
                    :size="42"
                    color="#fe6600"
                    :unitSize="30"
                  ></f-money>
                  <block v-if="selectshop.score * 1 || goodsData.score * 1">
                    +
                    <f-money
                      :money="selectshop.score * 1 || goodsData.score * 1"
                      :unit="integralName"
                      :size="40"
                      color="#fe6600"
                      :unitSize="30"
                      unitPosition="right"
                      :showZeroDecimal="false"
                    />
                  </block>
                </view>

                <view class="wanl-gray">
                  库存
                  <text class="margin-lr-xs">{{ selectshop.stock || 0 }}</text>
                  件
                </view>
                <view class="text-sm">
                  <view v-if="selectArr.join('')">已选择：{{ selectArr.join(' ') }}</view>
                  <view v-else>
                    请选择：
                    <text class="wanl-gray-light" v-for="(item, index) in goodsData.spu" :key="item.id">
                      <block v-if="index != 0">-</block>
                      {{ item.name }}
                    </text>
                  </view>
                </view>
              </view>
              <view class="close wlIcon-31guanbi" @tap="hideModal"></view>
            </view>
            <!-- 1.0.8升级 -->
            <scroll-view scroll-y="true" :style="{ maxHeight: wanlsys.screenHeight / 2 + 'px' }">
              <view
                class="opt text-left padding-bj solid-bottom"
                v-for="(value, spukey) in goodsData.spu"
                :key="value.id"
              >
                <view class="text-df">{{ value.name }}</view>
                <view class="tag">
                  <view
                    class="cu-tag text-sm"
                    v-for="(item, index) in value.item"
                    :key="index"
                    :class="[item.ishow ? '' : 'noactive', subIndex[spukey] == index ? 'active' : '']"
                    @tap="skuClick(item, spukey, $event, index)"
                  >
                    {{ item.name }}
                  </view>
                </view>
              </view>
              <view class="number padding-bj">
                <view class="text-df">购买数量</view>
                <uni-number-box
                  :min="1"
                  :max="selectshop.stock"
                  :value="selectNum"
                  :disabled="canCount"
                  @change="changeNum"
                ></uni-number-box>
              </view>
            </scroll-view>

            <view class="foot padding-lr-bj">
              <button
                v-if="isChoice"
                class="cu-btn bg-gradual-orange round text-bold complete"
                @tap="completeSelection"
              >
                完成
              </button>
              <block v-else>
                <button class="cu-btn bg-gradual-yellow round-left text-bold" @tap="SubmitData('addToCart', 1)">
                  加入购物车
                </button>
                <button class="cu-btn bg-gradual-orange round-right text-bold" @tap="SubmitData('placeOrder', 1)">
                  立即订购
                </button>
              </block>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部 -->
    <view class="wanlian cu-bar tabbar shop solid-top foot">
      <view class="action" @tap="onShop(goodsData.shop_id)">
        <view class="wlIcon-dianpu1 wanl-orange"></view>
        店铺
      </view>
      <view class="action" @tap="toCart">
        <view class="wlIcon-gouwuche">
          <view class="cu-tag badge" v-if="cart.cartnum > 0">{{ cart.cartnum }}</view>
        </view>
        购物车
      </view>
      <!-- 1.0.2升级 -->
      <view
        class="action"
        @tap="
          toChat(goodsData.shop_id, {
            id: goodsData.id,
            title: goodsData.title,
            image: goodsData.image,
            price: goodsData.price,
          })
        "
      >
        <view class="wlIcon-kefu">
          <view class="cu-tag badge"></view>
        </view>
        客服
      </view>
      <view class="btn-group">
        <button v-if="!goodsData.is_seckill" class="cu-btn bg-gradual-yellow round-left" @tap="SubmitData('addToCart')">
          加入购物车
        </button>
        <button
          v-if="!goodsData.is_seckill"
          class="cu-btn round-right bg-gradual-orange"
          @tap="SubmitData('placeOrder')"
        >
          立即购买
        </button>
        <button
          v-else-if="goodsData.is_seckill && !disableBuy"
          class="cu-btn btn-round bg-gradual-orange"
          @tap="SubmitData('placeOrder')"
        >
          立即购买
        </button>
        <button v-else :class="'cu-btn btn-round bg-grey'">已结束</button>
      </view>
    </view>

    <wanl-modal custom :show="followVisible" width="500rpx">
      <view class="attendance-modal">
        <!-- 	<view class="follow1" @click="tofollow">
					关注公众号
				</view> -->
        <view class="modal-header">
          <!-- <image :src="$wanlshop.appstc('/common/cup.png')" mode="widthFix"></image> -->
          <image src="/static/images/qrcode.jpg" mode="widthFix"></image>
        </view>
        <!-- <view class="modal-content text-sm wanl-gray" >
					<view>{{ followVisible }}</view>
				</view> -->
        <view class="modal-btn"
          ><button
            class="cu-btn wanl-bg-redorange round lg text-sm"
            @tap="
              followVisible = false;
              tofollow();
            "
          >
            长按二维码关注公众号
          </button></view
        >
      </view>
    </wanl-modal>
  </view>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import CountDown from '../../components/count-down';

export default {
  components: { CountDown },
  data() {
    return {
      followVisible: false,

      TabCur: 0,
      wanlsys: {},
      modalName: null, // 弹出层
      durect: 0, // 角标
      headerOpacity: 0, //不透明度
      currentSwiper: 0, // 轮播图右下角数字
      anchorlist: [
        {
          name: '主图',
          top: 0,
        },
        {
          name: '评价',
          top: 0,
        },
        {
          name: '详情',
          top: 0,
        },
        {
          name: '推荐',
          top: 0,
        },
      ], //导航条锚点
      selectAnchor: 0,
      //产品数据
      goodsData: {
        id: 0,
        category_id: 0,
        shop_id: 0,
        brand_id: 0,
        freight_id: 0,
        title: '',
        image: '',
        images: '',
        flag: '',
        content: '',
        category_attribute: [],
        activity: false,
        price: null,
        interval_price: null,
        market_price: null,
        sales: 0,
        brand: {},
        freight: {
          name: '',
          isdelivery: 1,
        },
        payment: 0,
        comment: 0,
        praise: 0,
        moderate: 0,
        negative: 0,
        like: 0,
        views: 0,
        status: '',
        category: {},
        follow: true,
        sku: [],
        spu: [],
        promotion: [],
        coupon: [],
        comment_list: {
          data: [],
          figure: 0,
          tag: [],
        },
        shop: {
          find_user: {
            fans: 0,
          },
          city: '',
        },
        shop_recommend: {},
      },
      // 猜你喜欢
      reload: true,
      likeData: [],
      current_page: 1, //当前页码
      last_page: 1, //总页码
      status: 'loading',
      contentText: {
        contentdown: ' ',
        contentrefresh: '正在加载...',
        contentnomore: '没有更多数据了',
      },
      // 商品规格组合
      shopItemInfo: {}, //存放要和选中的值进行匹配的数据
      selectArr: [], //存放被选中的值
      subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
      selectshop: {}, //存放最后选中的商品
      selectNum: 1, //选中数量
      isChoice: '', // 是否从选择进入
      scrollAnimation: 100, //分享滚动,
      randomUserList: [],
      disableBuy: false,
      disableTimeout: 0,
      swiperAutoplay: true,
      videoPlay: false,
    };
  },
  onLoad(option) {
    // #ifdef H5

    // console.log("option=============>", option  , location.href.split('?')[0])

    let _this = this;
    let href = location.href;

    // 如果 type == 0 说明分享进来得
    if (this.$jssdk.isWechat() && option.type == 0) {
      // uni.setStorageSync('isBinding', 'false'); // 设置 false 不绑定

      this.$api.post({
        url: '/wanlshop/user/isFollow',
        data: {},
        success: res => {
          console.log('isFollow=============>', res);
          if (res.code == 0) {
            _this.followVisible = true;
          }
        },
      });
      // let local = window.location.href; // 获取页面url
      // let code = this.getUrlCode().code; // 截取code
      // // 获取之前的code
      // let oldCode = uni.getStorageSync('wanlshop:code');
      // // 如果没有code，就去请求获取code
      // if (code == null || code === '' || code == 'undefined' || code == oldCode) {
      // 	let uri = encodeURIComponent(local);
      // 	// let page = this.$wanlshop.prePage().$mp.page;
      // 	uni.setStorageSync('wanlshop:code', 0); // 设置旧的code为0，避免死循环

      // 	let pages = getCurrentPages();
      // 	let page = pages[pages.length - 1];
      // 	page.options.isLogin = true

      // 	window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.$wanlshop.config('appid')}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=${encodeURIComponent(`/${page.route}?${this.queryParams(page.options)}`)}#wechat_redirect`

      // } else {
      // 	let pageroute = this.getUrlCode().state; // 截取state
      // 	uni.setStorageSync('wanlshop:code', code); // 保存最新code

      // 	this.$api.post({
      // 		url: '/wanlshop/user/isFollow',
      // 		data: {
      // 			code: code,
      // 		},
      // 		success: res => {
      // 			console.log("isFollow=============>", res )

      // 			if( res.code == 0 ){
      // 				_this.followVisible = true
      // 			}
      // 		}
      // 	});
      // }
    } else {
      // 	let page = this.$wanlshop.prePage().$mp.page;
      // this.pageroute = encodeURIComponent(`/${page.route}?${this.queryParams(page.options)}`);
    }

    // setTimeout(()=>{
    // 	window.history.replaceState(null, '',  href.split('?')[0] +'?id='+option.id  +'&type=0&invitation=' + _this.invitation);
    // }, 300)

    // #endif

    this.wanlsys = this.$wanlshop.wanlsys();
    this.loadData(option);
    this.loadlikeData();
    // #ifdef MP-WEIXIN
    wx.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline'],
    });
    // #endif
    this.durect =
      this.$store.state.statistics.notice.notice +
      this.$store.state.statistics.notice.order +
      this.$store.state.statistics.notice.chat +
      this.$store.state.statistics.order.pay +
      this.$store.state.statistics.order.delive +
      this.$store.state.statistics.order.receiving +
      this.$store.state.statistics.order.evaluate;
    this.getUserList();
  },
  onPageScroll(e) {
    //导航栏渐变
    let tmpY = 150;
    e.scrollTop = e.scrollTop > tmpY ? 150 : e.scrollTop; //如果当前高度大于250则250否则当前高度
    this.headerOpacity = e.scrollTop * (1 / tmpY); //$headerOpacity 赋值当前高度x（1÷250）
  },
  onReachBottom() {
    //判断是否最后一页
    if (this.current_page >= this.last_page) {
      this.status = 'noMore';
    } else {
      this.reload = false;
      this.current_page = this.current_page + 1; //页码+1
      this.status = 'loading';
      this.loadlikeData();
    }
  },
  watch: {
    selectshop(n, o) {
      if (n.price != o.price) {
        // 更新一次优惠券
        this.queryCoupon(n.price);
      }
    },
  },
  //监听属性
  computed: {
    canCount() {
      return this.subIndex.some(item => item === -1);
    },
    sendScore() {
      console.log(this.goodsData.shop.socre_ratio, this.appConfig.buy_send_score);
      return (
        (
          ((this.goodsData.shop.socre_ratio || this.appConfig.buy_send_score) / 100) *
          this.goodsData.interval_price
        ).toFixed(2) || 0
      );
    },
    ...mapState(['cart', 'common']),
    ...mapState('common', ['appConfig']),
    ...mapState({
      invitation: state => state.user.invitation,
    }),
    ...mapGetters('common', ['integralName']),
  },
  mounted() {
    console.log(this.appConfig);
    this.videoContext = uni.createVideoContext('swiperAudio', this);
  },
  onUnload() {
    clearTimeout(this.disableTimeout);
  },
  methods: {
    playVideo() {
      this.videoContext.play();
      this.videoPlay = true;
      this.swiperAutoplay = false;
    },
    getUserList() {
      this.$api.get({
        url: '/wanlshop/product/getUserList',
        success: res => {
          this.randomUserList = res.map(item => {
            item.nickname = item.nickname.replace(/([\w\W])([\w\W]+)/, (match, p1, p2) => {
              return (p1 + '*'.repeat(p2.length)).slice(0, 8);
            });
            return item;
          });
        },
      });
    },
    tofollow() {
      // location.href = 'http://mp.weixin.qq.com/mp/getmasssendmsg?__biz=MzkzOTIzMjM5MQ==#wechat_redirect'
      // this.$wanlshop.to('/pages/apps/webView?src=' + encodeURIComponent('https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzkzOTIzMjM5MQ==&scene=110#wechat_redirect') )
      // location.href = 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzkzOTIzMjM5MQ==&scene=110#wechat_redirect'
    },
    async loadData(option) {
      //加载商品
      this.$api.get({
        url: '/wanlshop/product/goods',
        data: option,
        success: res => {
          //详情正则
          res.content = res.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
            var img = `<img style="display: block; max-width: 100%;" src="${this.$wanlshop.oss(capture, 500, 0)}">`;
            return img;
          });
          // 价格区间
          if (res.sku.length == 0) {
            res.interval_price = res.price;
            res.market_price = res.price;
          } else {
            let price = [],
              market_price = [];
            for (let value of res.sku) {
              price.push(value.price);
              market_price.push(value.market_price);
            }
            let minPrice = Math.min.apply(null, price),
              maxPrice = Math.max.apply(null, price),
              maxMarketPrice = Math.max.apply(null, market_price);
            res.interval_price = minPrice == maxPrice ? Number(minPrice).toFixed(2) : minPrice; //+ '-' +( Number(maxPrice).toFixed(2)); //区间价格

            res.market_price = Number(maxMarketPrice).toFixed(2); //最大市场价
          }
          this.goodsData = res;
          // 商品规格组合
          this.goodsData.spu.map(item => {
            this.selectArr.push('');
            this.subIndex.push(-1);
          });
          this.checkItem(); //计算sku里面规格形成路径
          this.checkInpath(-1); //传-1是为了不跳过循环
          // 计算锚点高度
          setTimeout(() => {
            this.calcAnchor();
          }, 1000);
          if (res.is_seckill) {
            if (res.seckill_end_time > Date.parse(new Date()) / 1000) {
              setTimeout(() => {
                this.disableBuy = true;
              }, res.seckill_end_time * 1000 - Date.parse(new Date()));
            } else {
              this.disableBuy = true;
            }
          }
        },
      });
    },
    // 滚动底部加载猜你喜欢
    async loadlikeData() {
      this.$api.get({
        url: '/wanlshop/product/likes?pages=goods',
        data: {
          page: this.current_page,
        },
        success: res => {
          this.likeData = this.reload ? res.data : this.likeData.concat(res.data); //评论数据 追加
          this.current_page = res.current_page; //当前页码
          this.last_page = res.last_page; //总页码
          this.status = 'more';
        },
      });
    },
    // 查询优惠券，减缓服务器压力，单独查询
    async queryCoupon(price) {
      this.$api.post({
        url: '/wanlshop/coupon/query',
        data: {
          shop_id: this.goodsData.shop_id,
          goods_id: this.goodsData.id,
          shop_category_id: this.goodsData.shop_category_id,
          price: price,
        },
        success: res => {
          this.goodsData.coupon = res;
        },
      });
    },
    // 领取优惠券
    async onReceive(index) {
      let coupon = this.goodsData.coupon[index];
      this.$api.post({
        url: '/wanlshop/coupon/receive',
        loadingTip: '领取中',
        data: {
          id: coupon.id,
        },
        success: res => {
          coupon.id = res.id;
          coupon.state = true;
          this.$wanlshop.msg(res.msg);
          // 更新状态管理器
          this.$store.commit('statistics/dynamic', {
            coupon: this.$store.state.statistics.dynamic.coupon + 1,
          });
        },
      });
    },
    // 商品规格组合 选择
    skuClick(value, spukey, event, index) {
      if (value.ishow) {
        if (this.selectArr[spukey] != value.name) {
          this.$set(this.selectArr, spukey, value.name);
          this.$set(this.subIndex, spukey, index);
        } else {
          this.$set(this.selectArr, spukey, '');
          this.$set(this.subIndex, spukey, -1);
        }
        this.checkInpath(spukey);
        //如果全部选完
        if (this.selectArr.every(item => item != '')) {
          this.selectshop = this.shopItemInfo[this.selectArr];
          this.selectNum = 1;
        }
      }
      console.log('当前选中的规格========>', this.selectshop);
    },
    //循环所有属性判断哪些属性可选
    checkInpath(clickIndex) {
      //当前选中的兄弟节点和已选中属性不需要循环
      for (let i = 0, len = this.goodsData.spu.length; i < len; i++) {
        if (i == clickIndex) {
          continue;
        }
        let len2 = this.goodsData.spu[i].item.length;
        for (let j = 0; j < len2; j++) {
          if (this.subIndex[i] != -1 && j == this.subIndex[i]) {
            continue;
          }
          let choosed_copy = [...this.selectArr];
          this.$set(choosed_copy, i, this.goodsData.spu[i].item[j].name);
          let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !== 'undefined');
          if (this.shopItemInfo.hasOwnProperty(choosed_copy2)) {
            this.$set(this.goodsData.spu[i].item[j], 'ishow', true);
          } else {
            this.$set(this.goodsData.spu[i].item[j], 'ishow', false);
          }
        }
      }
      // console.log(this.goodsData.spu)
    },
    //计算有多小种可选路径
    checkItem() {
      let result = this.goodsData.sku.reduce(
        (arrs, items) => {
          return arrs.concat(
            items.difference.reduce(
              (arr, item) => {
                return arr.concat(
                  arr.map(item2 => {
                    //利用对象属性的唯一性实现二维数组去重
                    if (!this.shopItemInfo.hasOwnProperty([...item2, item])) {
                      this.shopItemInfo[[...item2, item]] = items;
                    }
                    return [...item2, item];
                  }),
                );
              },
              [[]],
            ),
          );
        },
        [[]],
      );
    },
    //商品规格修改数量
    changeNum(val) {
      this.selectNum = parseInt(val);
    },
    //轮播图指示器
    swiperChange(e) {
      this.currentSwiper = e.detail.current;
    },
    // 弹出层
    showModal(name) {
      this.isChoice = '';
      // 滚动下分享
      if (name == 'share' && this.modalName != 'share') {
        setTimeout(() => {
          this.scrollAnimation = 0;
        }, 300);
      }
      this.modalName = name;
    },
    // 关闭弹出层
    hideModal(name) {
      if (name) {
        this.showModal(name);
      } else {
        this.modalName = null;
      }
    },
    // 分享回调
    wanlShare(e) {
      if (e) {
        this.$wanlshop.auth(`/pages/user/complaint/complaint?id=${this.goodsData.id}&type=1`);
      } else {
        this.modalName = null;
      }
    },
    //禁止父元素滑动
    moveHandle() {},
    // 关注 & 取消
    follow() {
      this.goodsData.follow = !this.goodsData.follow;
      // 全局控制中心
      if (this.goodsData.follow) {
        this.$store.commit('statistics/dynamic', {
          collection: this.$store.state.statistics.dynamic.collection + 1,
        });
      } else {
        this.$store.commit('statistics/dynamic', {
          collection: this.$store.state.statistics.dynamic.collection - 1,
        });
      }
      this.$api.post({
        url: '/wanlshop/product/follow',
        data: {
          id: this.goodsData.id,
        },
        success: res => {
          this.goodsData.follow = res;
        },
      });
    },
    //跳转锚点
    toAnchor(index) {
      this.selectAnchor = index;
      uni.pageScrollTo({
        scrollTop: this.anchorlist[index].top,
        duration: 200,
      });
    },
    //计算锚点高度
    calcAnchor() {
      let query = null;
      // 支付宝小程序不能加后面的.in(this)，是它自身的限制
      // #ifndef MP-ALIPAY
      query = uni.createSelectorQuery().in(this);
      // #endif
      // #ifdef MP-ALIPAY
      query = uni.createSelectorQuery();
      // #endif
      query
        .select('#evaluate')
        .boundingClientRect(rec => {
          this.anchorlist[1].top = rec.top - this.wanlsys.height - 45;
        })
        .exec();
      query
        .select('#details')
        .boundingClientRect(rec => {
          this.anchorlist[2].top = rec.top - this.wanlsys.height - 45;
        })
        .exec();
      query
        .select('#recommend')
        .boundingClientRect(rec => {
          this.anchorlist[3].top = rec.top - this.wanlsys.height - 45;
        })
        .exec();
    },
    // 评论页
    onTag(tag) {
      this.$wanlshop.to(
        '/pages/product/comment?id=' + this.goodsData.id + '&praise=' + this.goodsData.praise + '&tag=' + tag,
      );
    },
    // 打开购物车
    toCart() {
      uni.switchTab({
        url: '/pages/cart',
      });
    },
    // 完成选择
    completeSelection() {
      if (this.canCount) {
        this.$wanlshop.msg('请选择完成规格');
      } else {
        this.ProcessingData();
      }
    },
    // 提交数据
    SubmitData(name, type) {
      // if (!this.subIndex[0]) {
      // this.$wanlshop.msg('客官先别急，系统还在加载');
      // } else {

      // }
      if (type == 1) {
        if (this.canCount) {
          this.$wanlshop.msg('请选择完成规格');
        } else {
          this.isChoice = name;
          this.ProcessingData();
        }
      } else {
        this.modalName = 'option';
        this.isChoice = name;
      }
    },
    ProcessingData() {
      if (this.isChoice == 'addToCart') {
        this.$store.dispatch('cart/add', {
          shop_id: this.goodsData.shop_id,
          shop_name: this.goodsData.shop.shopname,
          goods_id: this.goodsData.id,
          title: this.goodsData.title,
          number: this.selectNum,
          image: this.goodsData.image,
          sku: this.selectshop,
          sku_id: this.selectshop.id,
          sum: this.$wanlshop.bcmul(this.selectshop.price, this.selectNum),
        });
        this.$wanlshop.msg('已加购物车');
      } else if (this.isChoice == 'placeOrder') {
        let goodsData = [
          {
            goods_id: this.goodsData.id,
            number: this.selectNum,
            sku_id: this.selectshop.id,
          },
        ];
        // 提交订单
        if (this.$store.state.user.isLogin) {
          uni.redirectTo({
            url: `/pages/user/order/addorder?order_type=groups&data=${JSON.stringify(goodsData)}`,
          });
        } else {
          // let pages = getCurrentPages();
          // let page = pages[pages.length - 1];
          // page.options.isLogin = true
          // if( page.options.isLogin !== true){
          this.$wanlshop.to('/pages/user/auth/auth');

          // }
        }
      } else {
        this.$wanlshop.msg('数据异常');
      }
      this.hideModal();
    },
    productSearch(text) {
      this.$wanlshop.to(`/pages/page/search?type=goods&keywords=${text}`, 'fade-in', 100);
    },
    back() {
      this.$wanlshop.back(1);
    },

    queryParams(data, isPrefix = false) {
      let prefix = isPrefix ? '?' : '';
      let _result = [];
      for (let key in data) {
        let value = data[key];
        // 去掉为空的参数
        if (['', undefined, null].includes(value)) {
          continue;
        }
        if (value.constructor === Array) {
          value.forEach(_value => {
            _result.push(encodeURIComponent(key) + '[]=' + encodeURIComponent(_value));
          });
        } else {
          _result.push(encodeURIComponent(key) + '=' + encodeURIComponent(value));
        }
      }
      return _result.length ? prefix + _result.join('&') : '';
    },

    getUrlCode() {
      // 截取url中的code方法
      var url = location.search;
      // this.winUrl = url;
      var theRequest = new Object();
      if (url.indexOf('?') != -1) {
        var str = url.substr(1);
        var strs = str.split('&');
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
        }
      }
      return theRequest;
    },
  },
};
</script>

<style>
toast,
uni-toast {
  z-index: 9999;
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 136rpx;
  height: 136rpx;
  margin-top: -68rpx;
  margin-left: -68rpx;
  z-index: 9;
}
.video-play .video-play-icon {
  width: 100%;
  height: 100%;
  display: block;
}

.cu-custom .cu-bar .search-form {
  background-color: #fff;
}

.cu-custom .cu-bar {
  background-color: #f3f3f3;
}

.cu-custom .bar-bg {
  background-color: rgba(243, 243, 243, 0.96);
}

.cu-custom .cu-bar {
  z-index: 99;
}

/* #ifdef MP */
.cu-custom .cu-bar .search-form {
  margin: 0 0 0 25rpx;
}

/* #endif */

.cu-custom .cu-bar .nav .cu-item {
  line-height: 70rpx;
  height: 70rpx;
}

.swiper-box {
  position: relative;
  width: 100%;
  height: 100vw;
}
.swiper-box .random-user {
  height: 102rpx;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
}
.swiper-box .random-user swiper {
  width: 100%;
  height: 100%;
}
.swiper-box .random-user .random-user-item {
  margin: 20rpx;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  padding: 4rpx 18rpx 4rpx 4rpx;
  border-radius: 50rpx;
  align-items: center;
  width: fit-content;
}
.swiper-box .random-user .random-user-avatar {
  width: 48rpx;
  height: 48rpx;
  display: block;
  background: #ffffff;
  border-radius: 50%;
  margin-right: 12rpx;
}
.swiper-box .random-user .random-user-text {
  color: #ffffff;
  white-space: nowrap;
}
.swiper-box swiper {
  width: 100%;
  height: 100vw;
}

.swiper-box swiper swiper-item image {
  width: 100%;
  height: 100vw;
}

.swiper-box .indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 25upx;
  height: 40upx;
  border-radius: 40upx;
  font-size: 22upx;
  position: absolute;
  bottom: 20upx;
  right: 20upx;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.2);
}

.follow1 {
  position: fixed;
  top: 0;
  z-index: 100;
  left: 20%;
  color: #000000;
}

.seckill {
  height: 100rpx;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='375px' height='50px' viewBox='0 0 375 50' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3C!-- Generator: Sketch 60 (88103) - https://sketch.com --%3E %3Ctitle%3E编组%3C/title%3E %3Cdesc%3ECreated with Sketch.%3C/desc%3E %3Cdefs%3E %3ClinearGradient x1='61.5583796%25' y1='4.88854014%25' x2='36.9036079%25' y2='100%25' id='linearGradient-1'%3E %3Cstop stop-color='%23FFCC29' offset='0%25'%3E%3C/stop%3E %3Cstop stop-color='%23FFAE3D' offset='100%25'%3E%3C/stop%3E %3C/linearGradient%3E %3C/defs%3E %3Cg id='常规' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='新增秒杀' transform='translate(0.000000, -375.000000)'%3E %3Cg id='编组备份-3' transform='translate(0.000000, 375.000000)'%3E %3Crect id='矩形' fill='%23DD4343' x='0' y='0' width='375' height='50'%3E%3C/rect%3E %3Cpolygon id='路径-5' fill='%23FFE684' points='252.820404 0 227 50 375 50 375 0'%3E%3C/polygon%3E %3Cpolygon id='路径-4备份' fill-opacity='0.4' fill='%23FFDF32' points='249.432368 0 240.268449 22.9166667 246.047522 22.9166667 229.504658 50 239.468513 50 262.590387 16.7575474 256.414136 16.7575474 262.590387 0'%3E%3C/polygon%3E %3Cpolygon id='路径-4' fill='url(%23linearGradient-1)' points='242.92771 0 234.575853 22.78515 240.354926 22.78515 223 50 232.963855 50 252.512133 19.5085757 248.332271 19.5085757 256.085728 0'%3E%3C/polygon%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.seckill .seckill-text {
  height: 50rpx;
  width: 170rpx;
  margin-left: 24rpx;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='85px' height='25px' viewBox='0 0 85 25' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3C!-- Generator: Sketch 60 (88103) - https://sketch.com --%3E %3Ctitle%3E限时秒杀%3C/title%3E %3Cdesc%3ECreated with Sketch.%3C/desc%3E %3Cg id='常规' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='画板' transform='translate(-12.000000, -388.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E %3Cg id='限时秒杀' transform='translate(12.000000, 388.000000)'%3E %3Cpath d='M60.2387049,16.4882721 L62.8969709,17.9420114 L50.7686323,24.9822627 L56.9574078,18.7311841 L54.6106573,17.4435865 L61.7962826,9.98798109 L66.3651773,12.5008732 L60.2387049,16.4882721 L60.2387049,16.4882721 Z M82.7474927,17.1316069 C82.7035711,17.1934459 82.7035711,17.2243655 82.7474927,17.255285 C82.7914142,17.2862045 82.8792574,17.255285 82.8792574,17.1934459 C82.9231789,17.1316069 82.9231789,17.1006874 82.8792574,17.0697678 C82.8353358,17.0697678 82.7914142,17.0697678 82.7474927,17.1316069 Z' id='形状'%3E%3C/path%3E %3Cpath d='M8.21544651,1.2032427 C8.27774962,2.17932474 8.27774962,3.05156827 8.23621421,3.81997328 C8.1946788,4.5883783 8.1323757,5.39831871 8.04930488,6.22902684 C7.96623407,7.05973496 7.84162785,7.99428159 7.65471853,9.03266675 C8.02853718,11.2132756 8.1946788,12.9162272 8.1739111,14.120754 C8.1531434,15.3252808 8.11160799,16.1559889 8.04930488,16.5921107 C7.98700177,17.0282324 7.90393096,17.6512635 7.80009245,18.4404362 L4.83031091,18.4404362 L4.10344131,17.4851219 L4.10344131,20.4964388 L0.552164086,20.4964388 L0.552164086,1.182475 L8.21544651,1.182475 L8.21544651,1.2032427 Z M4.53956307,9.01189904 C4.83031091,7.18434118 5.01722024,5.79290507 5.12105875,4.81682303 C5.22489727,3.84074099 5.26643268,3.09310368 5.26643268,2.5323757 L4.10344131,2.5323757 L4.10344131,15.9275442 L4.78877551,16.6544138 C4.91338172,15.9275442 4.97568483,14.889159 4.99645254,13.5392583 C5.03798794,12.1685899 4.87184632,10.6525476 4.53956307,9.01189904 Z M17.4570744,14.3076633 L19.5753801,13.1239042 L20.2607143,14.4530372 L18.0593377,15.6990994 C18.7862074,17.3812834 19.2638645,18.4196685 19.4507739,18.8557903 C19.6376832,19.2711443 19.9491987,19.85264 20.3437851,20.5587419 L16.5225277,20.5587419 C16.2317799,19.9357108 15.9825674,19.3957506 15.7748904,18.9388611 C14.4457574,19.6034276 13.282766,20.1641556 12.306684,20.621045 L8.77617449,20.621045 L8.77617449,1.2032427 L19.5753801,1.2032427 L19.5753801,11.5040234 L12.5351287,11.5040234 L12.5351287,18.8973257 L15.172627,17.6512635 C15.1103239,17.5266573 15.0687885,17.4228188 15.0272531,17.3189803 C14.7988084,16.77902 14.5703636,16.1975243 14.3419189,15.6160286 C14.1134742,15.0137652 13.6773524,13.8507739 13.0335536,12.1062868 L16.6263662,12.1062868 L17.4570744,14.3076633 L17.4570744,14.3076633 Z M12.4728256,2.47007259 L12.4728256,5.75136967 L15.9825674,5.75136967 L15.9825674,2.47007259 L12.4728256,2.47007259 Z M12.4935933,10.1956581 L15.9825674,10.1956581 L15.9825674,6.95589644 L12.4728256,6.95589644 L12.4935933,10.1956581 Z M30.0423024,1.36938433 L30.0423024,20.0810848 L22.5243939,20.0810848 L22.5243939,1.36938433 L30.0423024,1.36938433 L30.0423024,1.36938433 Z M25.8264587,2.71928502 L25.8264587,9.30264689 L27.0309855,9.30264689 L27.0309855,2.71928502 L25.8264587,2.71928502 Z M25.8264587,10.4448706 L25.8264587,18.2327592 L27.0309855,18.2327592 L27.0309855,10.4448706 L25.8264587,10.4448706 Z M40.0523353,0.78788864 L40.0523353,3.05156827 L41.609913,3.05156827 L41.609913,4.48453978 L40.0523353,4.48453978 L40.0523353,20.4549034 L36.4595226,20.4549034 L32.2644466,18.7311841 L32.2852143,17.1320709 L36.293381,18.6273456 L36.293381,4.48453978 L30.5822627,4.48453978 L30.5822627,3.05156827 L36.293381,3.05156827 L36.293381,0.78788864 L40.0523353,0.78788864 Z M34.5696617,5.75136967 C34.8396418,7.26741199 35.0473188,8.90806053 35.1926928,10.6733153 C35.3380667,12.4593377 35.4211375,14.2868956 35.4626729,16.1975243 L32.5136591,16.1975243 C32.4721237,15.2006745 32.3267497,13.4146521 32.098305,10.7979215 C31.8698603,8.18119092 31.6829509,6.49900698 31.5583447,5.73060196 L34.5696617,5.73060196 L34.5696617,5.75136967 Z M51.8691583,2.34546637 C50.3738837,2.5323757 49.5431756,2.65698191 49.3978016,2.71928502 L49.3562662,5.70983426 L51.5991782,5.70983426 C51.6199459,6.10442062 51.6407136,6.54054238 51.6407136,7.03896726 C50.6438638,7.03896726 49.8546911,7.08050266 49.23166,7.16357347 L49.23166,20.6625804 L46.0749691,20.6625804 L46.012666,7.12203807 L43.5413094,7.12203807 L43.5413094,5.73060196 L46.0749691,5.73060196 L46.1372723,2.76082043 C45.3896349,2.84389124 44.5796945,2.88542665 43.707451,2.86465894 L43.707451,1.49399054 C46.0957369,1.41091973 48.7124674,1.2032427 51.536875,0.891727155 L51.8691583,2.34546637 L51.8691583,2.34546637 Z M45.4934735,8.07735241 L45.244261,20.6418127 L43.6243802,20.6418127 C43.6243802,19.437286 43.6659156,17.6304958 43.7489864,15.2006745 C43.8320572,12.7708533 43.915128,10.4033351 43.9566634,8.07735241 L45.4934735,8.07735241 L45.4934735,8.07735241 Z M49.9585296,20.6625804 L49.8546911,8.07735241 L51.4745719,8.035817 L51.6407136,20.6625804 L49.9585296,20.6625804 Z M55.4619709,1.70166757 C55.1504554,7.16357347 54.7974044,11.3378818 54.4028181,14.2245925 L51.7653198,14.2245925 C52.3883509,8.47193876 52.7621695,4.29763045 52.9283112,1.70166757 L55.4619709,1.70166757 L55.4619709,1.70166757 Z M59.2001575,0.891727155 L59.2001575,6.95589644 C59.2001575,9.48955621 59.2209252,10.9848308 59.2416929,11.4832557 C59.2416929,11.4832557 57.7464183,13.5184906 57.6633474,13.6223291 L55.8150219,13.6223291 L55.8150219,0.891727155 L59.2001575,0.891727155 L59.2001575,0.891727155 Z M62.0453328,1.78473839 C62.8137378,6.85205793 63.1875565,9.65569784 63.1875565,10.1956581 L60.3423811,10.1956581 C60.1347041,7.74506916 59.8231886,4.94142925 59.4078345,1.78473839 L62.0453328,1.78473839 L62.0453328,1.78473839 Z M76.9773113,8.76266422 L76.9773113,9.67646554 L84.3083104,9.67646554 L84.3083104,11.0055985 C81.9407923,11.0263662 79.5732742,11.0679016 77.1849883,11.1094371 L77.0811498,20.6002773 L72.8860738,20.5379742 L70.144737,19.3334475 C70.0616662,19.644963 69.9785953,19.9357108 69.9162922,20.2472264 C68.4417853,20.2264587 66.9672784,20.2264587 65.5135392,20.205691 C65.6796808,19.9149431 66.5934598,17.1113032 68.2341083,11.7740035 L72.0345979,11.7740035 L72.0346033,11.7739812 C71.5557617,13.7932428 71.0573125,15.8078033 70.5393286,17.8173827 C71.3077337,18.1704337 72.0969064,18.5027169 72.8653114,18.8765356 C72.8445437,16.3013404 72.8030083,13.7053775 72.7614729,11.1301824 L65.5135445,11.0678793 C65.4927768,10.6317575 65.4720091,10.2164034 65.4512414,9.80104937 L72.6991698,9.73874626 L72.7199375,8.76266422 L76.9773166,8.76266422 L76.9773113,8.76266422 Z M82.937642,0.850191749 L82.9791775,1.05786878 C82.4184495,1.32784892 80.7362655,2.63621421 77.9326256,4.96219695 L83.9967949,8.78345431 L77.8080194,8.6796158 C75.8973907,7.12203807 74.9213087,6.35363305 74.8797733,6.37440076 C74.8382379,6.39516846 73.9244589,7.16357347 72.1384365,8.6796158 L65.7004485,8.7211512 L72.0345979,4.609146 L67.0295815,0.704817828 L72.2630427,0.704817828 L74.9420764,3.2384776 L77.7249486,0.829424046 L82.937642,0.829424046 L82.937642,0.850191749 Z M82.3353787,11.7532358 C82.3353787,11.9193775 83.0207129,14.7853205 84.3706136,20.3302972 L79.8224866,20.3926003 L77.9326256,11.7947713 L82.3353787,11.7532358 L82.3353787,11.7532358 Z' id='形状'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
}

.seckill .seckill-count-down {
  margin-right: 60rpx;
  font-weight: 500;
  font-size: 24rpx;
  color: #dd4343;
  line-height: 34rpx;
  text-align: right;
}
.attendance-modal .modal-header {
  width: 100%;
  /* height: 280rpx; */
  margin-top: 10rpx;
  position: relative;
  /* margin: 0 auto; */
}
.attendance-modal .modal-header image {
  width: 90%;
  height: 90%;
  margin-left: 5%;
}
.attendance-modal .modal-content {
  height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.attendance-modal .modal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.attendance-modal .btn {
  width: 100%;
  border-radius: 50rem;
  font-size: $font-size-lg;
}
.cu-btn.btn-round {
  width: 380rpx !important;
  border-radius: 39rpx;
}
/* 灰色 */
.bg-grey {
  background-color: darkgray;
}
</style>
